<script>

  import Sortable from 'sortablejs';
  import { getTransferList } from '@/api/appTool/chatBar'

export default {
  components: {},
  props: {
    type: {
      type: String,
      default: '4'
    },
    sideId: {
      type: String,
      default: 5
    },
    selected: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  data: function () {
    return {
      data: [],
      value: [],
      propdesc: {
        key: 'materialId',
        label: 'digest'
      },
      draggingKey: null
    };
  },
  beforeCreate: function () {
  },
  created: async function () {
    await this.getTransferList();
  },
  mounted: function () {

    let that=this;
    document.body.ondrop = function (e) {
      e.preventDefault();
      e.stopPropagation();
    };
    const transfer = this.$refs.transfer.$el;
    const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0];
    const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0];
    const rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0];
    Sortable.create(rightEl, {
      onEnd: function (evt) {
        const {oldIndex,newIndex} = evt;
        const temp = that.value[oldIndex];
        if (!temp || temp === 'undefined') {
          return
        }// 解决右边最后一项从右边拖左边，有undefined的问题
        that.$set(that.value,oldIndex,that.value[newIndex])
        that.$set(that.value,newIndex,temp)
      },
      // Class name for the drop placeholder
      ghostClass: "sortable-ghost",
      //选中元素的自定义样式
      // Class name for the chosen item
      chosenClass: "sortable-chosen",
      //拖拽时的自定义样式
      // Class name for the dragging item
      dragClass: "sortable-drag",
    });
    const leftEl = leftPanel.getElementsByClassName('el-transfer-panel__list')[0];
    Sortable.create(leftEl, {
      onEnd: function (evt) {
        const {oldIndex,newIndex} = evt;
        const temp = that.data[oldIndex]
        if (!temp || temp === 'undefined') {
          return
        } // 解决右边最后一项从右边拖左边，有undefined的问题
        that.$set(that.data,oldIndex,that.data[newIndex]);
        that.$set(that.data,newIndex,temp)
      }
    });
    leftPanel.ondragover = function (ev) {
      ev.preventDefault();
    };
    leftPanel.ondrop = function (ev) {
      ev.preventDefault();
      console.debug(that.value);
      const index = that.value.indexOf(that.draggingKey);
      if(index !== -1){
        that.value.splice(index,1)
      }
    };
    // 拖到目标容器后触发
    rightPanel.ondragover = function (ev) {
      ev.preventDefault();
    };
    // 拖到后松开结束
    rightPanel.ondrop = function (ev) {
      ev.preventDefault();
      if(that.value.indexOf(that.draggingKey) === -1){
        that.value.push(that.draggingKey)
      }
    };
  },
  methods: {
    propdescchange: function () {
      switch (this.type) {
        case '4':
          this.$set(this, 'propdesc', {
            key: 'materialId',
            label: 'digest'
          });
          break;
        case '0':
        case '2':
        case '3':
        case '5':
          this.$set(this, 'propdesc', {
            key: 'materialId',
            label: 'materialName'
          });
          break;
        case '7':
          this.$set(this, 'propdesc', {
            key: 'materialId',
            label: 'content'
          });
          break;
      }
    },
    getTransferList:async function () {
      let that = this, params = {
        userId: '',
        sideId: this.sideId,
        mediaType: this.type,
        keyword: ''
      };
      await getTransferList(params).then(function (t) {
        let n = t.data.selected, i = t.data.noSelected, r = [];
        i.map(function (t) {
          switch (that.type) {
            case '4':
              r.push({
                key: t.materialId,
                label: t.digest
              });
              break;
            case '0':
            case '2':
            case '3':
            case '5':
              r.push({
                key: t.materialId,
                label: t.materialName
              });
              break;
            case '7':
              r.push({
                key: t.materialId,
                label: t.content
              });
              break;
            case '9':
              r.push({
                key: t.materialId,
                label: t.materialName
              });
          }
        });
        that.$set(that, 'data', r);
        that.$set(that, 'value', n);
        that.$emit('update:selected', n);
        console.debug(that.data);
        console.debug(that.value);
      }).catch(function (e) {
      });
    },
    handleChange: function (e) {
      this.$emit('update:selected', e);
    },
    // 开始
    drag: function (ev, option) {
      // 拖动key
      console.debug(ev);
      this.draggingKey = option.key;

    }
  }
}

</script>

<template>
  <el-transfer
    ref='transfer'
    id='transfer'
    :filterable="''"
    :button-texts="['到左边','到右边']"
    :titles="['待选择素材','已选择素材']"
    :data="data"
    @change="handleChange"
    v-model="value">
    <!--<span slot-scope="{ option }" :draggable="!option.disabled"  @dragstart="drag($event,option)">{{ option.key }} - {{ option.label }}</span>-->
    <span slot-scope="{ option }" :draggable="!option.disabled"  @dragstart="drag($event,option)">{{ option.label }}</span>
  </el-transfer>
</template>
